<!--
 * @Author: your name
 * @Date: 2020-04-02 16:13:13
 * @LastEditTime: 2020-04-02 17:10:15
 * @LastEditors: your name
 * @Description: In User Settings Edit
 * @FilePath: \vue-imooc-ebook\src\components\ebook\EbookSlide.vue
 蒙版组件  ，动态加载组件                                                                                       -->
<template>
  <transition name="fade">
    <div class="slide-content-wrapper" v-show="menuVisible && settingVisible === 3">
      <transition name="slide-right" v-show="settingVisible === 3">
        <div class="content">
          <div class="content-page-wrapper" v-if="bookAvailable">
            <div class="content-page">
              <!-- is属性，如果是1加载content组件，如果为2加载book组件 -->
              <component :is="currentTab === 1 ? content : bookmark"></component>
            </div>
            <div class="content-page-tab">
              <div class="content-page-tab-item"
              :class="{'selected':currentTab === 1}"
              @click="selectTab(1)">
              {{$t('book.navigation')}}
              </div>
              <div class="content-page-tab-item"
              :class="{'selected':currentTab === 2}"
              @click="selectTab(2)">
              {{$t('book.bookmark')}}
              </div>
            </div>
          </div>
          <!-- 目录没有加载出来时，图画显示 -->
          <div class="content-empty" v-else>
            <ebook-loading></ebook-loading>
          </div>
        </div>
      </transition>
      <div class="content-bg" @click="hideTitleAndMenu()"></div>
    </div>
  </transition>
</template>

<script>
import { ebookMixin } from '../../utils/mixin'
import EbookSlideContents from './EbookSlideContents'
import EbookSlideBookmark from './EbookSlideBookmark'
import EbookLoading from './EbookLoading'
export default {
  mixins: [ebookMixin],
  components: {
    EbookLoading
  },
  data() {
    return {
      currentTab: 1, // tab的选中效果，1：选中目录，2：选中书签
      content: EbookSlideContents, // content组件插件
      bookmark: EbookSlideBookmark // 书签目录组件插件
    }
  },
  methods: {
    // tab方法
    selectTab(tab) {
      this.currentTab = tab
    }
  }
}
</script>

<style lang="scss" rel="stylesheet/scss" scoped>
  @import "../../assets/styles/global";
  .slide-content-wrapper {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 350;
    display: flex;
    width: 100%;
    height: 100%;
    .content {
      flex: 0 0 85%;
      width: 85%;
      height: 100%;
      .content-page-wrapper {
        display: flex;
        flex-direction: column;
        width: 100%;
        height: 100%;
        .content-page {
          // 自动填充,滚动条
          flex: 1;
          width: 100%;
          overflow: hidden;
        }
        .content-page-tab {
          display: flex;
          flex: 0 0 px2rem(85);//48
          width: 100%;
          height: px2rem(48);//48
          // background: yellow;
          .content-page-tab-item {
            flex: 1;
            font-size: px2rem(30);//12
            @include center;
          }
        }
      }
      .content-empty {
        @include center;
        width: 100%;
        height: 100%;
      }
    }
    .content-bg {
      flex: 0 0 15%;
      width: 15%;
      height: 100%;
    }
  }
</style>
